<template>
  <div class="chart-box">
    <el-card class="box-card">
      <div class="box-body">
        <el-row class="chart">
          <el-col :span="24">
            <div id="chart" class="charts" ref="deptTransRef"></div>
            <dept-select
              class="filter-select"
              :onlyCompany="true"
              placeholder="选择公司"
              :value.sync="deptId"
              :clearable="false"
              @getDeptDetailData="getDeptDetailData"
            />
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getEntryDataByPid } from "@/api/employee";
import { getDismDataByPId } from "@/api/dismission";

export default {
  name: "OperationLog",
  data() {
    return {
      deptId: 2,
      currentMonth: new Date().getMonth() + 1,
      dept: {
        deptName: "1024软件科技有限公司",
      },
    };
  },
  created() {
    let currDate = new Date();
    this.currentMonth =
      currDate.getFullYear() + "-" + (currDate.getMonth() + 1);
  },
  mounted() {
    this.getStatisticsData();
  },
  watch: {
    deptId(nVal) {
      if (!nVal) this.deptId = 2;
      this.getStatisticsData();
    },
  },
  methods: {
    async getStatisticsData() {
      const myCharts = this.$echarts.init(this.$refs.deptTransRef);
      this.keys = [];

      const entry = await getEntryDataByPid(this.deptId);
      const dism = await getDismDataByPId(this.deptId);
      console.log(entry);
      console.log(dism);
      const entryValue = [];
      const dismValue = [];

      const { data: entryData } = entry;
      entryData.forEach((item) => {
        entryValue.push(item.count);
        this.keys.push(item.name);
      });

      const { data: dismData } = dism;
      dismData.forEach((item) => {
        dismValue.push(item.count);
      });

      let option = {
        title: {
          text: "各部门离职/入职人数",
          subtext: `${this.currentMonth}月份，${this.dept.deptName}`,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["入职", "离职"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.keys,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "入职",
            type: "bar",
            data: entryValue,
            itemStyle: {
              color: "#7FFFAA",
            },
          },
          {
            name: "离职",
            type: "bar",
            data: dismValue,
            itemStyle: {
              color: "#32CD32",
            },
          },
        ],
      };

      myCharts.clear();
      myCharts.setOption(option);
    },
    getDeptDetailData(dept) {
      this.dept = dept;
    },
  },
};
</script>

<style scoped lang="scss">
.chart-box {
  height: 100%;
}
.box-card {
  height: 100%;
}
.box-body {
  height: 100% !important;
}
.chart {
  height: 100%;
}
/deep/ .el-card__body {
  height: 100% !important;
}
.box-body {
  height: 100%;
  position: relative;
}
.el-col {
  height: 100%;
}
#chart {
  height: 100%;
  width: 100%;
  margin-top: 20px;
}
.filter-select {
  width: 200px;
  position: absolute;
  left: 250px;
  top: 16px;
}
</style>
